<!-- 碳汇强度趋势 -->
<template>
  <div class="rank_container">
    <div class="title"></div>
    <div class="box" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let charts = ref()
onMounted(() => {
  let mycharts = echarts.init(charts.value)

  mycharts.setOption({
    xAxis: {
      type: 'category',
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      // 取消 x 轴的刻度线
      axisTick: {
        show: false,
      },
      // 设置 x 轴标签的显示间隔为 0，即显示所有标签
      axisLabel: {
        // 设置 x 轴字体颜色为#7691C8
        color: '#C8E0F7 ',
        fontSize: 12,
        lineHeight: 14,
        // margin: 50
      },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      name: '单位10 t/平方公里',
      nameGap: 15,
      // 单位的文本样式
      nameTextStyle: {
        color: '#BCC8D3',
        fontSize: 10,
      },
      splitLine: {
        show: true, // 确保网格线显示
        lineStyle: {
          color: '#405387', // 设置 y 轴网格线颜色为灰色，可根据需求修改
        },
      },
      axisLabel: {
        // 设置 Y 轴字体颜色为#7691C8
        color: '#C8E0F7 ',
        fontSize: 12,
        lineHeight: 14,
        // margin: 50
      },
    },
    series: [
      {
        data: [150, 230, 224, 328, 135, 147, 260, 230, 400, 150, 250, 150],
        type: 'line',
        lineStyle: {
          width: 2, // 调小折线的细度，数值越小线越细，可按需调整
        },
        areaStyle: {
          color: {
            type: 'linear', // 线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#355FF5 ', // 渐变起始颜色，这里是半透明绿色
              },
              {
                offset: 1,
                color: '#C7D3FF', // 渐变结束颜色，完全透明绿色
              },
            ],
          },
        },
      },
    ],
  })
})
</script>
<style lang="scss" scoped>
.rank_container {
  display: flex;
  flex-direction: column;
  .title {
    margin-left: 2px;
    width: 444px;
    height: 66px;
    background: url(../../../../assets/svg/tanhuiqiangdu.svg) no-repeat;
  }
  .box {
    width: 450px;
    height: 225px;
    margin-left: 53px;
    background: radial-gradient(200% 78% at 97% 48%, #0a3a87 0%, #02132e 100%),
      rgba(2, 19, 46, 0.88);
  }
}
</style>
